<template>
  <div class="songlist">
    <nav1></nav1>
      <div class="list">
           <h1>{{msg}}</h1>
              <ul>
                  <li v-for="(item,index) in tab.list" :key="index" @click="classify(item.id)">
                  <img :src="item.pic" alt="">
                  <p class="p1">{{item.name}}</p>
                  </li>
              </ul>
          </div>
  </div>
</template>

<script>
import nav1 from '../../components/nav'
export default {
    components:{
        nav1
    },
    data(){
        return {
            tab:[],
            msg:''
        }
    },
    methods:{
       getsong(){
           var id=this.$route.query.id
            this.axios.get(`http://m.kuwo.cn/newh5app/api/mobile/v1/playlist/type/${id}?rn=20`)
            .then(res=>{
                console.log(res);
                this.tab=res.data.data
            }).catch(err=>{
                console.log(err);
            })
        },
        classify(i){
            this.$router.push({
                path:'/classify',
                query:{
                    id:i
                }
            })
            console.log(i);
        }   
    },
    created(){
        this.getsong()
        this.msg=this.$route.query.name
    }

}
</script>
<style lang="scss" scoped>
.songlist{
    width: 1400px;
    margin: 0 auto;
    
    
    .list{
        width: 1400px;
        margin:200px  auto;
        h1{
            margin-bottom: 30px;
           
        }

        ul{
            width: 1400px;
             display: flex;
             flex-wrap: wrap;
            justify-content: space-between;
            li{
              img{
                  width: 300px;
                  height: 300px;
                  border-radius: 30px;
              }
               
               
              
              
            }
        }
    }
}
</style>